<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="__STATIC__/mobile/css/common.css" />
    <link rel="stylesheet" href="__STATIC__/mobile/css/swiper.min.css" />
    <link rel="stylesheet" href="__STATIC__/mobile/css/course_detail.css" />
    <title>课程详情</title>
</head>

<body>
    <div class="course_detail">
        <!--banner-->
        <div class="banner">
            <!--轮播-->
            <div class="swiper-container" id="swiper">
                <div class="swiper-wrapper">
                    {foreach $db.slider as $slider}
                    <div class="swiper-slide">
                        <a href="javascript:;">
                            <img src="{$slider ?: ''}" />
                        </a>
                    </div>
                    {/foreach}
                </div>
                <!--分页器-->
                <div class="swiper-pagination"></div>
            </div>
            <!--项目介绍-->
            <div class="course_introduction">
                <h4>{$db.title ?: ''}</h4>
            </div>
        </div>
        <!--课程属性-->
        <div class="course_type">
            <div class="about_title">
                <h6>课程属性</h6>
                <img src="__STATIC__/mobile/img/icon-red-dotted.png" alt="" />
            </div>
            <ul class="type_list">
                {notempty name='db.desc'}
                {foreach $db.desc as $vd}
                <li>
                    <div class="left">
                        <img src="{$vd.thumb ?: ''}" alt="" />
                        <span>{$vd.name} :</span>
                    </div>
                    <p>{$vd.value ?: ''}</p>
                </li>
                {/foreach}
                {/notempty}
            </ul>
            <!--图表-->
            <div class="chart" id="chart"></div>
        </div>
        <!--课程介绍-->
        <div class="course_box">
            <!--top select-->
            <div class="top_tap detail_top">
                <ul>
                    {foreach $lesson_content as $k=>$v}
                    <li {if $k==0} class="on" {/if}>{$v.title ?: ''}</li>
                    {/foreach}

                </ul>
            </div>
            {foreach $lesson_content as $key=>$val}
            {if $val.type=='kechenganpai'}
            <div class="course_content">
                <div class="about_title">
                    <h6>{$val['title']}</h6>
                    <img src="__STATIC__/mobile/img/icon-red-dotted.png" alt="" />
                </div>
                <ul class="schedule_list">
                    {notempty name="val['content']"}
                    {foreach $val['content'] as $vck=>$vcv}
                    <li>
                        <h3>{$vcv.title ?: ''}</h3>
                        <!--时间-->
                        {notempty name="vcv['content']"}
                        {foreach $vcv['content'] as $kk=>$vv}
                        <div class="schedule_time">
                            <h5>{$vv.title ?: ''}</h5>
                            {foreach $vv['content'] as $kkk=>$vvv}
                            <div class="time_list">
                                <img src="{$vvv.thumb ?: ''}" alt="" />
                                <p>{$vvv.content}</p>
                            </div>
                            {/foreach}

                        </div>
                        {/foreach}
                        {/notempty}
                    </li>
                    {/foreach}
                    {/notempty}
                </ul>
            </div>
            {else}
            <div class="course_content">
                <div class="about_title">
                    <h6>{$val['title']}</h6>
                    <img src="__STATIC__/mobile/img/icon-red-dotted.png" alt="" />
                </div>
                <ul class="brief_list">
                    {notempty name="val['content']"}
                    {foreach $val['content'] as $kk=>$vv}
                    <li>
                        {notempty name="vv.title"}
                        <h5>{$vv.title ?: ''}</h5>
                        {/notempty}
                        {$vv.content|raw|default=''}
                    </li>
                    {/foreach}
                    {/notempty}
                </ul>
            </div>

            {/if}
            {/foreach}
        </div>
        <!--分享 / 报名-->
        <div class="share_box">
            <img src="__STATIC__/mobile/img/share.png" alt="分享" />
            {php}$dbid = $db['id'];{/php}
            <a href='{:url("/apply/$dbid")}'>
                <button>立即咨询</button>
            </a>
        </div>
    </div>
    <script src="__STATIC__/mobile/js/rem.js"></script>
    <script src="__STATIC__/mobile/js/jquery-3.3.1.min.js"></script>
    <script src="__STATIC__/mobile/js/swiper.min.js"></script>
    <script src="__STATIC__/mobile/js/echarts.min.js"></script>
    <script>
        //轮播
        var swiper1 = new Swiper('#swiper', {
                autoplay: true,
                loop: true,
                speed: 2000,
                pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
                    clickable: true
                }
            })
            // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart'));
        option = {
            tooltip: {},
            radar: {
                // shape: 'circle',
                name: {
                    textStyle: {
                        color: '#333',
                        backgroundColor: '#fff',
                        borderRadius: 0,
                        padding: [0, 5]
                    }
                },
                indicator: {$db['leidatu']|raw|json_encode},
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 203, 101,.5)'
                    }
                },
            },
            series: [{
                name: '分布图',
                type: 'radar',
                data: [{
                    value: {$leidatu_value|raw|json_encode},
                    areaStyle: {
                        normal: {
                            opacity: 1,
                            color: new echarts.graphic.RadialGradient(0.5, 0, 1, [{
                                color: 'rgba(255, 203, 101,.5)',
                                offset: 1
                            }])
                        }
                    }
                }]
            }]
        };
        myChart.setOption(option);
        //切换导航
        $('.top_tap ul li').on('click', function() {
                $(this).addClass('on').siblings().removeClass('on')
                let index = $(this).index()
                var height = $('.course_box .course_content').eq(index)
                height = height[0].offsetTop - 100
                $('html,body').stop(true).animate({
                    'scrollTop': height + 'px'
                })
            })
            //置顶切换
        $(window).scroll(function() {
            let top = $('.banner').height() + $('.course_type').height()
            if ($(window).scrollTop() > top) {
                $('.detail_top').css({
                    "position": "fixed",
                })
            } else {
                $('.detail_top').removeAttr('style')
            }
            /**滚动修改 start**/
            //滚动到标杆位置,左侧导航加active
            $('.course_content').each(function(index) {
                var target = parseInt($(this).offset().top - 160 - $(window).scrollTop());
                if (target <= 0) {
                    $('.detail_top li').eq(index).addClass('on').siblings().removeClass('on')
                }
                //如果到达页面底部，给左侧导航最后一个加active
                else if ($(document).height() == $(window).scrollTop() + $(window).height()) {
                    $('.detail_top li:last-child').addClass('on').siblings().removeClass('on')
                }
            });
            /**滚动修改 end**/
        })
    </script>
</body>

</html>